<template>
  <div class="myMainContainer">
    <button @click="msgInfoFn">点击我</button>
    <pre v-highlight>
      <code>2</code>
    </pre>
<!--    <el-row :gutter="10">
      <el-col :span="12">
        <div class="myMain">
          <div class="titleName">案例演示</div>
          <div class="container">
            <el-divider content-position="left">默认参数</el-divider>
            <el-button @click="layerChange" style="margin-bottom: 40px">点击打开提示层</el-button>
            <el-divider content-position="left">关闭遮罩层</el-divider>
            <el-button @click="layerChange_2" style="margin-bottom: 40px">点击打开提示层</el-button>
            <el-divider content-position="left">不自动关闭</el-divider>
            <el-button @click="layerChange_3">点击打开提示层</el-button>
            <el-button type="danger" @click="layerRemove" style="margin-bottom: 40px">点击关闭提示层</el-button>
            <el-divider content-position="left">自定义提示信息</el-divider>
            <el-button @click="layerChange_4">点击打开提示层</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="myMain">
          <div class="titleName">参数说明</div>
          <div class="container">
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="name"
                label="参数 (obj) 可不传">
              </el-table-column>
              <el-table-column
                prop="explain"
                label="说明">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="myMain">
          <div class="titleName">使用方式</div>
          <div class="container">
            <el-table
              :data="tableData2"
              border
              style="width: 100%">
              <el-table-column
                prop="name"
                label="调用方法">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>-->
  </div>
</template>
<script>
/** 必须的样式 **/
import './css/layer.css'
/** 必须的JS文件 **/
import { msgInfo } from './js/index'
export default {
  name: 'layerIndex',
  data () {
    return {
      tableData: [
        {
          name: 'obj.type',
          explain: '是否自动关闭 || true 或 false'
        },
        {
          name: 'obj.mask',
          explain: '是否打开遮罩 || true 或 false'
        },
        {
          name: 'obj.text',
          explain: '自定义提示文字'
        }
      ],
      tableData2: [
        {
          name: 'layer.msgInfo(obj)'
        },
        {
          name: 'layer.msgRemove() || 删除提示层DOM方法，一般不会使用'
        }
      ]
    }
  },
  methods: {
    msgInfoFn () {
      msgInfo('操作成功', {
        TYPE: 1
      })
    },
    // 默认参数
    layerChange () {
      layer.msgInfo()
    },

    // 关闭遮罩层
    layerChange_2 () {
      let obj = {
        mask: false, // 是否打开遮罩
        text: '操作成功', // 定义提示文字
      }
      layer.msgInfo(obj)
    },

    // 不自动关闭
    layerChange_3 () {
      let obj = {
        type: false, // 是否自动关闭
        mask: false, // 是否打开遮罩
        text: '操作成功', // 定义提示文字
      }
      layer.msgInfo(obj)
    },

    // 关闭提示层
    layerRemove () {
      layer.msgRemove()
    },

    // 自定义提示文字
    layerChange_4 () {
      let obj = {
        text: '更改了提示文字', // 定义提示文字
      }
      layer.msgInfo(obj)
    }
  }
}
</script>
